import {Divider, Menu} from "antd";
import {SmileFill} from "antd-mobile-icons";
import {Link, Outlet} from "react-router-dom";
import {ApiFilled, ContactsTwoTone, MessageFilled, PushpinFilled, StarFilled} from "@ant-design/icons";
import {useState} from "react";
import {Header} from "antd/es/layout/layout";

const {SubMenu} = Menu;

let localUser = JSON.parse(localStorage.getItem("userData"))['user'];
console.log("header:", localUser);

export default function SelfHeader() {
    const [current, setCurrent] = useState('index');

    function handleClick(e) {
        setCurrent(e.key);
    }

    return (
        <>
                <Menu onClick={handleClick} selectedKeys={[current]} mode="horizontal" theme="light">
                    <Menu.Item key="user" icon={<SmileFill/>}>
                        <Link to="/home/user">主页</Link>
                    </Menu.Item>
                    <Menu.Item key="publish" icon={<PushpinFilled/>}>
                        <Link to="/home/publish">发布</Link>
                    </Menu.Item>
                    <Menu.Item key="about" icon={<MessageFilled/>}>
                        <Link to="/about">关于</Link>
                    </Menu.Item>
                    <SubMenu key="selfCenter" icon={<ContactsTwoTone/>} title={`欢迎 ${localUser}`}>
                        <Menu.Item key="loginOut" icon={<ApiFilled/>}><Link to="/loginOut">退 出</Link></Menu.Item>
                        <Menu.Item key="collection" icon={<StarFilled/>}><Link to="/home/my-collections">我 的 收
                            藏</Link></Menu.Item>
                    </SubMenu>
                </Menu>
            <Divider dashed/>
            <Outlet/>
        </>
    )
}